import React, { Component } from 'react';
import './listen.css'

class Listen extends Component {

    constructor(props){
        super(props);

        // this.getInitStyleList();

        this.state = {
            initStyle : this.getInitStyleList()
        }

    }
    
    getInitStyleList(){
        let initList = {};
        let quesitonData = this.props.data.bind_question;

        quesitonData.map((value, index)=>{
            initList[value.id] = ''
        });

        return initList;
    }

    getLeft(){

        if(this.props.switch === 0){
            return 0+'px';
        }

        if(this.props.switch === 1){
            return (-this.props.width)+'px';
        }

    }

    renderQuestionUl(){
        let quesitonData = this.props.data.bind_question;
        //todo:可能服务端不做JSON转对象，让客户端来做吧。
        return quesitonData.map((value, index)=>{

            let selection = value.selection;
            //API传过来的是JSON对象不能用map所以转成数组
            let selectArray = [];

            for(let x in selection){
                selectArray.push([x, selection[x]]);
            }

            let lis = selectArray.map((value2, index2)=>{
                return this.renderQuestionLi(value.id, value2, index2);
            });

            return (
                <ul key={index} className="question-box">
                    <span className="question-number">{value.question}.</span>
                    {lis}
                </ul>
            );


        });

    }

    //<input onClick={(e)=>this.props.input(e)} value={selection[1]} name={id} type="radio" />
    //<div style={{'display':'inline'}} dangerouslySetInnerHTML={{__html:selection[0]+')'}} ></div> 

    //选择答案
    selectAnswer(e){
        let init = this.state.initStyle;
        let initKey = e.target.dataset.id;
        let initValue = e.target.innerHTML;
        
        init[initKey] = initValue;

        this.setState({
            initStyle:init
        });

        this.props.input(e)

    }


    renderQuestionLi(id, selection, index){

        let init = this.state.initStyle;

        let className = '';

        if(selection[0] === init[id]){
            className = 'my-radios-checked not-mark'
        }else{
            className='my-radios not-mark'
        }


        return (
            <li key={index}>
                <span data-id={id} data-value={selection[1]} onClick={(e)=>this.selectAnswer(e)} className={className}>{selection[0]}</span> 
                <div style={{'display':'inline'}} dangerouslySetInnerHTML={{__html:selection[1]}} ></div>
            </li>
        );
    }

    render() {

        let left = this.getLeft();
        
        let ulElement = this.renderQuestionUl();

        return (
            <div style={{height:this.props.height}} className="question-view">
                 <ul className="question-card-box" style={{width:this.props.width*2, left:left}}>
                    <li className="question-card" style={{width:this.props.width}}>
                       <div className="quesiton-wrapper">
                            <div onClick={(e)=>this.props.mark(e)} className="setcion_explain" dangerouslySetInnerHTML={{ __html: this.props.data.section_explain }}></div>

                            <div onClick={(e)=>this.props.mark(e)} className="explain" dangerouslySetInnerHTML={{ __html: this.props.data.explain }}></div>

                            <audio controls="controls" style={{width:'100%'}} controlslist="nodownload" >
                                <source src={this.props.data.common_question} />
                            </audio>

                       </div> 
                    </li>
                    <li className="question-card" style={{width:this.props.width}}>
                        <div onClick={(e)=>this.props.mark(e)} className="quesiton-wrapper-2">
                            {ulElement}
                        </div>
                    </li>
                 </ul>   
            </div>
        );
    }
}

export default Listen;